<template>
  <!--微心愿页面 -->
  <div class="wish">
      <!-- 数据为空 -->
      <div v-if="leveList.length==0" class="nullleveList">
          <span>暂无数据</span>
      </div>
      <div v-else class="wish_main">
          <div class="wish_header" v-for="(item,index) in leveList.slice((currentPage-1)*pageSize,currentPage*pageSize)" :key="index">
            <el-row class="wish_share">
                <el-col class="wish_header_img" :span="2">
                    <img class="wish_img" :src="item.photograph">
                </el-col>
                <el-col :span="22" class="wish_userinfo">
                    <span class="wish_username">{{item.name}}</span>
                    <span class="wish_text">{{item.content}}</span>
                    <span class="wish_time">
                        {{item.time}}
                        <span class="wish_reply" @click="message(item.commentId,item.userId,item.showComment,index)">回复</span>
                    </span>
                    <div class="comment">
                        <!-- 已点赞状态 -->
                        <svg class="icon-heart-fill" v-if="item.currentUserIsLike" @click="onlock('heartFill',item.commentId,item.userId)">
                            <use xlink:href="#icon-heart-fill"></use>
                        </svg>
                        <!-- 未点赞状态 -->
                        <svg class="icon-heart" v-else @click="onlock('heart',item.commentId,item.userId)">
                            <use xlink:href="#icon-heart"></use>
                        </svg>
                        <span class="count" v-if="item.likeNum != 0">{{item.likeNum}}</span>
                        <span class="count" v-else>赞</span>
                        <!-- 评论 -->
                        <svg class="icon-message"  @click="message(item.commentId,item.userId,item.showComment,index)">
                            <use xlink:href="#icon-message"></use>
                        </svg>
                        <span class="count" @click="message(item.commentId,item.userId,item.showComment,index)">评论</span>
                    </div>
                </el-col>
            </el-row>
            <div class="wish_comment" v-if="item.showComment">
                <el-row>
                    <el-col :span="2"></el-col>
                    <el-col></el-col>
                    <el-col></el-col>
                </el-row>
                <el-row>
                    <el-col :span="2">
                        <img class="wish_comment_img" :src="myInfoList.photograph">
                    </el-col>
                    <el-col :span="22">
                        <el-input v-model="messageCount" @input="handlerChange" clearable class="wish_comment_input" placeholder="留下评论"></el-input>
                        <!-- <i class="el-icon-position"></i> -->
                        <!--:disabled="showdisabled"：判断输入框是否为空决定按钮是否禁用  -->
                        <el-button class="wish_comment_sending" type="primary" disabled plain>评论</el-button>
                    </el-col>
                </el-row>
            </div>
        </div>
      </div>
      <!-- 分页 -->
      <div class="paginationBlock">
        <el-pagination  @size-change="handleSizeChange"
         @current-change="handleCurrentChange" :current-page="currentPage" :page-size="pageSize"
         layout="total,prev, pager, next,jumper" :total="total">
        </el-pagination>
      </div>
    <div class="wish_publish">
        <el-button type="primary" plain @click="publish">发布分享</el-button>
    </div>
    <wishAdd ref="wisha" v-show="showwish"></wishAdd>
  </div>
</template>

<script>
import wishAdd from "./wishAdd.vue"
// 引入一个中转文件用于调用页面方法
import transfer from '../../../assets/js/transfer.js';
export default {
    components:{
        wishAdd
    },
    data(){
        return{
            leveList:[],//留言内容列表
            showwish:false,//是否显示新增分享弹框
            myInfoList:{},//我的信息
            total:0,
            currentPage: 1,
            pageSize: 4,
            messageCount:"",//评论内容
            showdisabled:true
        }
    },
    mounted(){
        this.messageList()
        this.myinfomation()
        transfer.$on('messageList',()=> {
			this.messageList();
		})
    },
    methods:{
        messageList(){//获取留言列表
            this.axios({
                headers: { Authentication: localStorage.getItem("token") },
                method: "get",
                url: `/comment/getCommentDetailInfoList?pageNum=${this.currentPage}&pageSize=${this.pageSize}`
            }).then(res=>{
                if (res.data.code != 20001) {
                    return this.$message.error(res.data.msg);
                }
                this.leveList = res.data.data.list
                this.total = res.data.data.totals
                // currentUserIsLike:当前用户是否点赞；0：未点赞，1：已点赞
                // 向数组中添加是否显示字段
                this.leveList.forEach(item=>{
                    item.showComment = false
                    if(item.currentUserIsLike==0){
                        item.currentUserIsLike = false
                    }else {
                        item.currentUserIsLike = true
                    }
                })
            })
        },
        myinfomation(){//获取我的信息
            this.axios({
                headers: { Authentication: localStorage.getItem("token") },
                method: "get",
                url: "/user/getCurrentUserInfo"
            }).then(res=>{
                if (res.data.code != 20001) {
                    return this.$message.error(res.data.msg);
                }
                this.myInfoList = res.data.data
                // console.log(this.myInfoList)
            })
        },
        onlock(state,commentId,userId){
            // console.log(commentId)
            //state:点击状态 heart:未点赞 heartFill:已点赞
            // commentId：留言id userId：用户id
            this.axios({
                headers: { Authentication: localStorage.getItem("token") },
                method: "put",
                url: "/comment/updateLike",
                data:{commentId:commentId}
            }).then(res=>{
                // console.log(res)
                this.messageList()
            })
            // var key = (this.currentPage - 1) *this.pageSize +index
            // this.leveList[key].currentUserIsLike = !currentUserIsLike
        },
        handlerChange(e){//监听输入框变化，控制评论按钮禁用状态
            // console.log(e)
            if(e!=""){
                this.showdisabled = false
            }else{
                this.showdisabled = true
            }
        },
        publish(){//点击发布分享按钮
        // console.log("点击按钮")
            this.showwish = true
            this.$nextTick(() => {
                this.$refs.wisha.init()
            })
        },
        message(commentId,userId,showComment,index){//点击评论按钮
            // commentId:留言id，userId：发布用户id，showComment：是否展开，index：索引
            // console.log("第"+this.currentPage+"页的第"+(index+1)+"条")
            var key = (this.currentPage - 1) *this.pageSize +index
            this.leveList[key].showComment = !showComment
            this.$forceUpdate(); // 加这个是因为有时候点击页面会没反应
            // $forceUpdate()迫使vue实例重新（rander）渲染虚拟DOM，注意并不是重新加载组件。
        },
        handleCurrentChange(val){//点击获取页码
            this.currentPage = val
            this.messageList()
            this.currentPage = 1
        },
        handleSizeChange(val) {
            this.pageSize = val
            this.currentPage = 1
        },
    },

}
</script>

<style lang="scss">
.wish{
    .wish_share{
        // border: 1px solid #f00;
    }
    .wish_main{
        height: 77vh;
        // border: 1px solid #000;
        overflow: auto;
        // margin-bottom: 1vh;
    }
    .wish_header{
        border-radius: 15px;
        margin-top: 2vh;
        // background: rgb(211 221 231);
        background: #fff;
        // border: 1px solid #f00;
        // width: 95%;
        margin: 2vh 0;
        padding: 5px;
        .wish_header_img{
            .wish_img{
                margin: 1vh 0 0 1vw;
                width: 75%;
                border-radius: 50%;
            }
        }
        .wish_userinfo{
            padding-left: 1vw;
            // border: 1px solid #000;
            margin-top: 2.5vh;
            .wish_username{
                color: rgb(221, 96, 96);
            }
            .wish_time{
                display: block;
                font-size: 0.8em;
                color: rgb(161, 161, 161);
                .wish_reply{
                    color: rgb(110, 110, 110);
                }
                .wish_reply:hover{
                    cursor: pointer;
                    color: sandybrown;
                }
            }
            .wish_text{
                margin: 2vh 0;
                font-weight: 700;
                display: block;
                width: 80%;
                // margin-bottom: 2vh;
            }
        }
        .comment{
            margin-top: 2vh;
            // margin-left: 6vw;
            // border: 1px solid #000;
            // i{
            //     margin-top: 10vh;
            //     font-size: 2em;
            // }
            // padding-top: 6vh;
            .icon-heart,.icon-message,.icon-heart-fill{
                width: 2em;
                height: 2em;
                margin: 2px;
                fill: currentColor;
                vertical-align: middle;
                overflow: hidden;
                cursor: pointer;
            }
            // .icon-heart{
            //     color: rgb(94, 190, 245);
            // }
            .icon-heart:hover,.icon-message:hover{
                // cursor: pointer;
                color: red;
            }
            .icon-heart-fill{
                color: red;
            }
            .count{
                // display: block;
                cursor: pointer;
                margin-left: 0.2vw;
                margin-right: 2vw;
            }
            .count:hover{
                color: red;
            }
        }
    }
    .wish_publish{
        // height: 10vh;
        // width: 10%;
        margin-top: 1vh;
        margin-right: 2vw;
        text-align: right;
        // border: 1px solid #000;
    }
    .wish_comment{
        padding: 5px;
        height: 15vh;
        margin-left: 2vw;
        width: 95%;
        // border: 1px solid #000;
        .wish_comment_img{
            width: 55%;
            margin: 1vh 0 0 1vw;
            border-radius: 50%;
        }
        .wish_comment_input{
            margin-top: 2vh;
            width: 80%;
        }
        .wish_comment_sending{
            margin-left: 0.5vw;
        }
    }
    .paginationBlock{
        position: absolute;
        bottom: 3vh;
        left: 0;
        width: 88%;
        // border: 1px solid #000;
        .el-pagination{
            // position: absolute;
            // bottom: 4vh;
            // left: 30%;
            text-align: center;
            .el-pager li{
                background: none;
            }
            .btn-next,.btn-prev{
                background: none;
            }
        }
    }
    .nullleveList{
        border: 1px solid rgb(194, 193, 193);
        height: 78vh;
        color: rgb(134, 134, 134);
        text-align: center;
        line-height: 78vh;
    }
}
</style>